<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>标签管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="css/app.css"/>-->
		<style>
			input,
			button,
			.mui-btn {
				margin-top: 10px;
				margin-left: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标签管理</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-input-row">
					<h4 style="margin-top: 10px; float: left;">类型：</h4>
					<div class="mui-pull-right">
						<button class="mui-btn mui-btn-primary" style="width: 80px;" type="button"
							onclick="TagType_Init();">数据维护</button>&nbsp;&nbsp;
						<button class="mui-btn mui-btn-primary" id="btnAddTagType" style="width: 80px;" type="button"
							onclick="TagType_Add();">添加类型</button>&nbsp;&nbsp;
						<button class="mui-btn mui-btn-danger" id="btnDelTagType" style="width: 80px;" type="button"
							onclick="TagType_Del();">删除类型</button>&nbsp;&nbsp;
					</div>
				</div>
				<div id="divTagType">
					<!--
					<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="TagType_Select()">
						操作
					</button>
					-->
				</div>
			</div>

			<div class="mui-content-padded">
				<div class="mui-input-row">
					<h4 style="margin-top: 10px; float: left;">标签：</h4>
					<div class="mui-pull-right">
						<button class="mui-btn mui-btn-primary" id="btnAddTag" style="width: 80px;" type="button"
							onclick="Tag_Add();">添加标签</button>&nbsp;&nbsp;
						<button class="mui-btn mui-btn-danger" id="btnDelTag" style="width: 80px;" type="button"
							onclick="Tag_Del();">删除标签</button>&nbsp;&nbsp;
					</div>
				</div>
				<div id="divTag">

				</div>
			</div>

		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="libs/lib.js"></script>
	<script>
		var tagTypeList = [];
		var tagList = [];
		var tagTypeId = "";
		var tagId = "";

		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		Page_Init();
		TagType_Get_List();

		function Page_Init() {
			Page_Init_TagType();
			Page_Init_Tag();
		}

		function Page_Init_TagType() {
			if (tagTypeId) {
				document.getElementById("btnDelTagType").style.display = "";
				for (var i = 0; i < tagTypeList.length; i++) {
					document.getElementById("btnTagType_" + tagTypeList[i].id).className =
						"mui-btn mui-btn-primary mui-btn-outlined";
				}
				document.getElementById("btnTagType_" + tagTypeId).className = "mui-btn mui-btn-primary";
			} else
				document.getElementById("btnDelTagType").style.display = "none";
			document.getElementById("btnAddTag").style.display = "";
		}

		function Page_Init_Tag() {
			if (!tagTypeId) {
				document.getElementById("btnAddTag").style.display = "none";
				document.getElementById("btnDelTag").style.display = "none";
				return;
			}

			if (tagId) {
				document.getElementById("btnDelTag").style.display = "";
				for (var i = 0; i < tagList.length; i++) {
					document.getElementById("btnTag_" + tagList[i].id).className = "mui-btn mui-btn-primary mui-btn-outlined";
				}
				document.getElementById("btnTag_" + tagId).className = "mui-btn mui-btn-primary";
			} else
				document.getElementById("btnDelTag").style.display = "none";
		}

		function TagType_Get_List() {
			var param = {};
			Core.Post("TagType/List", param, function(result, status) {
				if (result.errorMsg) {
					Core.Msg.Alert(result.errorMsg);
					return;
				}
				tagTypeList = result.data;
				if (!tagTypeList)
					return;
				if (tagTypeList.length == 0)
					return;

				var html = "";
				for (var i = 0; i < tagTypeList.length; i++) {
					html += " <button type='button' id='btnTagType_" + tagTypeList[i].id +
						"' class='mui-btn mui-btn-primary mui-btn-outlined' onclick='TagType_Select(" + tagTypeList[i]
						.id + ")'> ";
					html += " 	" + tagTypeList[i].name + " ";
					html += " </button> ";
				}
				document.getElementById("divTagType").innerHTML = html;

				tagTypeId = tagTypeList[0].id;
				Tag_GetList();
			});
		}

		function TagType_Add() {
			Core.Msg.Prompt("请输入标签类型：", function(val) {
				if (!val) {
					Core.Msg.Alert("标签类型名不能为空");
					return;
				}
				var param = {
					Param: {
						name: val
					}
				};
				Core.Post("TagType/Add", param, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}
					TagType_Get_List();
				});
			});
		}

		function TagType_Init() {
			Core.Post("TagType/InitData", null, function(result, status) {
				TagType_Get_List();
				Core.Msg.Alert("操作成功");
			});
		}

		function TagType_Del() {
			Core.Msg.Confirm("您确定要删除该标签类型吗？", null, null, function() {
				if (!tagTypeId)
					return;
				Core.Post("TagType/Del", {
					id: tagTypeId
				}, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}
					tagTypeId = "";
					tagId = "";
					document.getElementById("btnDelTagType").style.display = "none";
					document.getElementById("btnDelTag").style.display = "none";
					TagType_Get_List();
				});
			})
		}

		function TagType_Select(typeId) {
			tagTypeId = typeId;
			Page_Init_TagType();
			document.getElementById("divTag").innerHTML = "";
			Tag_GetList(tagTypeId);
		}

		function Tag_GetList(tagTypeId) {
			var param = {
				Param: {
					"TagTypeId": tagTypeId
				}
			};
			Core.Post("Tag/List", param, function(result, status) {
				if (result.errorMsg) {
					Core.Msg.Alert(result.errorMsg);
					return;
				}
				tagList = result.data;
				if (!tagList)
					return;
				if (tagList.length == 0)
					return;

				var html = "";
				for (var i = 0; i < tagList.length; i++) {
					html += " <button type='button' id='btnTag_" + tagList[i].id +
						"' class='mui-btn mui-btn-primary mui-btn-outlined' onclick='Tag_Select(" + tagList[i].id +
						")'> ";
					html += " 	" + tagList[i].name + " ";
					html += " </button> ";
				}
				document.getElementById("divTag").innerHTML = html;

				tagId = tagList[0].id;
			});
		}

		function Tag_Add() {
			Core.Msg.Prompt("请输入标签：", function(val) {
				if (!val) {
					Core.Msg.Alert("标签类型名不能为空");
					return;
				}
				var param = {
					Param: {
						tagTypeId: tagTypeId,
						name: val
					}
				};
				Core.Post("Tag/Add", param, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}
					Tag_GetList(tagTypeId);
				});
			});
		}

		function Tag_Del() {
			Core.Msg.Confirm("您确定要删除该标签吗？", null, null, function() {
				if (!tagId)
					return;
				Core.Post("Tag/Del", {
					id: tagId
				}, function(result, status) {
					if (result.errorMsg) {
						Core.Msg.Alert(result.errorMsg);
						return;
					}
					tagId = "";
					document.getElementById("btnDelTag").style.display = "none";
					Tag_GetList(tagTypeId);
				});
			})
		}

		function Tag_Select(typeId) {
			tagId = typeId;
			Page_Init_Tag();
		}
	</script>
</html>